<template>
  <div class="pieCharts" ref="pieCharts"></div>
</template>

<script>
import * as echarts from "echarts";
let options = {
  title: {
    text: null,
    subtext: null,
    left: "10%",
    top: "5%",
    itemGap: 12,
    textStyle: {
      fontSize: 20,
      color: "#fff",
      fontWeight: 500,
    },
    subtextStyle: {
      fontSize: 22,
      color: "#fff",
    },
  },
  series: [
    {
      name: null,
      type: "pie",
      radius: ["50%", "80%"],
      center: ["70%", "50%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 2,
        borderColor: "transparent",
        borderWidth: 1,
      },
      label: {
        show: false,
      },
      emphasis: {
        label: {
          show: false,
        },
      },
      labelLine: {
        show: false,
      },
      data: null,
    },
  ],
};
export default {
  props: {
    echartsData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initchartFn();
    });
  },
  methods: {
    initchartFn() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.pieCharts);
      this.setOptionsFn();
    },
    setOptionsFn() {
      options.title.text = this.echartsData.text;
      options.title.subtext = this.echartsData.subtext;
      options.series[0].name = this.echartsData.text;
      options.series[0].data = this.echartsData.arr;
      options.series[0].color = this.echartsData.colorArr;
      this.chart.setOption(options);
    },
  },
};
</script>

<style lang="scss" scoped>
.pieCharts {
  width: 100%;
  height: 100%;
}
</style>
